<script setup>
import { ref, reactive, nextTick, onActivated, getCurrentInstance, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { promotionOrder } from '@/api/ExtensionManage/index.js'
import { exportFile } from '@/utils/common.js';

const formInline = ref([
  {
    type: "input",
    prop: "orderNo",
    placeholder: "销售单号",
    label: "",
    model: "",
    minwidth: 260
  },
  {
    type: "input",
    prop: "memberQueryCondition",
    placeholder: "会员姓名/手机号",
    label: "",
    model: "",
    minwidth: 260
  },
  {
    type: "input",
    prop: "referrerQueryCondition",
    placeholder: "推广者姓名/手机号",
    label: "",
    model: "",
    minwidth: 260
  },
  {
    type: "select",
    placeholder: "佣金状态",
    label: '',
    filterable: true,
    prop: 'transStatus',
    data: [
      { label: '在途', value: '0' },
      { label: '已完成', value: '1' },
      { label: '已退款', value: '3' }
    ],
    model: "",
    minwidth: 260
  },
])

const btnLefts = ref([
  {
    label: "导出",
    plain: false,
    type: "primary",
    show: true,
    plain: true,
    img: new URL("@/assets/icon/btn-export.png", import.meta.url),
    style: "border-color:#0C268C;color:#0C268C",
    click: async () => {
      const loading = ElLoading.service({
        lock: true,
        text: '导出中',
        background: 'rgba(255, 255, 255, 0.7)',
      })
      try {
        await exportFile(`/jy-member/mgmt/member/referrer/referrerOrderExport`, 'post', `推广订单`, {}, searchData.value)
        loading.close()
      } catch (e) {
        loading.close()
      }
    }
  },
])

const btnRights = ref([

])

const tableConfig = ref([
  {
    prop: "orderNo",
    label: "销售单号",
    minwidth: 148
  },
  {
    prop: "commission",
    label: "佣金（元）",
    minwidth: 137
  },
  {
    prop: "transStatus",
    label: "佣金状态",
    minwidth: 137,
    format: (value) => {
      switch (value) {
        case 0:
          return '在途'
        case 1:
          return '已完成'
        case 3:
          return '已退款'
      }
    }
  },
  {
    prop: "memberName",
    label: "会员姓名",
    minwidth: 137
  },
  {
    prop: "memberPhone",
    label: "会员手机号",
    minwidth: 137
  },
  {
    prop: "referrerName",
    label: "推广者姓名",
    minwidth: 137
  },
  {
    prop: "referrerPhone",
    label: "推广者手机号",
    minwidth: 137
  },
  {
    prop: "settleTime",
    label: "结算时间",
    minwidth: 168
  },
]);

const seachTable = ref(null);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);
const searchData = ref({})

const handlerSearch = async (formInline) => {
  tableLoading.value = true;
  try {
    let data = {
      ...formInline
    }
    searchData.value = data
    const res = await promotionOrder(data)
    totalPage.value = res.total || 0;
    tableData.value = res.records || [];
    tableLoading.value = false;
  } catch (e) {
    tableLoading.value = false;
  }
}
</script>

<template>
  <div class="page-content">
    <SeachTable :tableType="1" ref="seachTable" :forms="formInline" :btnLefts="btnLefts" :btnRights="btnRights"
      :tableLoading="tableLoading" :tableConfig="tableConfig" :tableData="tableData" :totalPage="totalPage"
      @handlerSearch="handlerSearch">
    </SeachTable>
  </div>
</template>